<template>
	<view class="common-list u-f animated fadeInLeft fast">
		<view class="common-list-left">
			<image :src="item.userpic" mode="widthFix" lazy-load ></image>
		</view>
		
		<view class="common-list-right">
			<view class="u-f-ac u-f-jsb">
				<view class="u-f-ac">
					{{item.username}}
					<tag-sex-age :sex="item.sex" :age="item.age"/>
				</view>
				<view class="icon iconfont icon-zengjia" v-show="!isguanzhu" @tap='handleFocusClick'>
					关注
				</view>
			</view>
			<view class="">{{item.title}}</view>
			<view class="u-f-ajc">
				<image 
				:src="item.titlepic" 
				mode="widthFix" lazy-load v-if="item.titlepic"></image>
				
				<!-- 视频 -->
				<template v-if="item.video">
					<view class="common-list-play icon iconfont icon-bofang"></view>
					<view class="common-list-playinfo">
						{{item.video.looknum}} 次播放{{item.video.long}}
					</view>
				</template>
				
				<!-- 分享 -->
				<view class="common-list-share u-f-ac" v-if="item.share">
					<image :src="item.share.titlepic" mode="widthFix"></image>
					<view>
						{{item.share.title}}
					</view>
				</view>
			</view>
			<view class="u-f-ac u-f-jsb">
				<view class="">{{item.path}}</view>
				<view class="u-f-ac">
					<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
					<view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view>
					<view class="icon iconfont icon-dianzan1">{{item.goodnum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TagSexAge from './tag-sex-age.vue'
	export default {
		name:"common-list",
		components:{
			TagSexAge
		},
		props:{
			item: Object,
			index: Number
		},
		data() {
			return {
				isguanzhu: this.item.isguanzhu
			};
		},
		methods:{
			// 点击关注
			handleFocusClick() {
				this.isguanzhu = true
				uni.showToast({
					title:"关注成功"
				})
			},
		}
	}
</script>

<style scoped>
.common-list {
	padding: 20upx;
	
}
.common-list-left {
	flex-shrink: 0;
}
.common-list-left image{
	width: 90upx;
	height: 90upx;
	border-radius: 50%;
}
.common-list-right {
	flex: 1;
	margin-left: 15upx;
	border-bottom: 1upx solid #eee;
	padding-bottom: 10upx;
}

.common-list-right> view:nth-child(1)> view:first-child{
	color: #999;
	font-size: 32upx;
}

.common-list-right> view:nth-child(1)> view:last-child{
	background-color: #EEE;
	padding: 0 10upx;
	font-size: 26upx;
}
.common-list-right> view:nth-child(2) {
	font-size: 32upx;
	padding: 12upx 0;
}
.common-list-right> view:nth-child(3) {
	position: relative;
	margin-bottom: 10upx;
}

.common-list-play, .common-list-playinfo {
	position: absolute;
	color: #FFF;
}
.common-list-play {
	font-size: 120upx;
}
.common-list-playinfo {
	right: 10upx;
	bottom: 10upx;
	background-color: rgba(51, 51, 51, 0.73);
	border-radius: 20upx;
	padding: 0 20upx;
	font-size: 26upx;
}


.common-list-right> view:nth-child(4) > view{
	color: #AAAAAA;
}
.common-list-right> view:nth-child(4) > view:nth-child(2)>view {
	margin-left: 10upx;
	padding-left: 5upx;
	font-size: 28upx;
}

.common-list-share {
	background-color: #EEEEEE;
	border-radius: 10upx;
	width: 100%;
	padding: 10upx;
}
.common-list-share > image {
	width: 200upx;
	height: 150upx;
	margin-right: 10upx;
}
.common-list-right> view:nth-child(3) image {
	width: 100%;
	border-radius: 10upx;
}
</style>
